<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件</title>
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const chart = echarts.init(document.getElementById('chart'))
    chart.setOption({
      title: {
        text: '标题',
        subtext: '副标题'
      },
      xAxis: {
        data: ['一季度', '二季度', '三季度', '四季度']
      },
      yAxis: {
        max: 200
      },
      // 图例
      legend: {
        data: [
          '折线图',
          {
            name: '柱状图',
            icon: 'roundRect', // 图标类型（原矩型）
            textStyle: {
              color: 'black' // 文字颜色
            }
          }
        ],
        left: 100
      },
      // 图表位置
      grid: {
        top: '15%',
        bottom: '10%',
        left: '5%',
        right: '5%'
      },
      // 工具类 - 以下功能根据顺序渲染，可以自由调整顺序
      toolbox: {
        feature: {
          // 数据区域缩放
          dataZoom: {
            // yAxisIndex: 0 // 选取区域的时候，需要指定Y轴，否则没数据
            yAxisIndex: false // 官方推荐 不选任何坐标轴
          },
          // 还原
          restore: {},
          // 保存为图片
          saveAsImage: {}
        }
      },
      // 最底部数据范围查看
      dataZoom: [
        {
          show: true,
          start: 0,
          end: 100,
          type: 'slider',
          backgroundColor: 'rgba(35, 86, 176, 0.7)', // Light blue background
          dataBackground: {
            lineStyle: {
              color: 'red'
            },
            areaStyle: {
              color: 'red'
            }
          },
          selectedDataBackground: {
            lineStyle: {
              color: '#096dd9'
            },
            areaStyle: {
              color: '#40a9ff'
            }
          },
          fillerColor: 'rgba(24,144,255,0.2)', // Semi-transparent blue
          borderColor: '#1890ff'
        }
      ],
      // 数据
      series: [
        {
          name: '折线图', // legend 对应
          type: 'line', // 折线图
          data: [100, 120, 110, 80]
        },
        {
          name: '柱状图', // legend 对应
          type: 'bar',
          data: [20, 40, 80, 160]
        }
      ]
    })
  </script>
</html>
